<template>
    <div>
        <div class="bg-[#fff]  rounded-[1.1rem] border border-[#F3F4F6] p-[1.5rem] shadow-[0px_2px_8px_0px_#0F172A0A]">
            <p class="text-[1rem] font-[Inter] font-normal leading-[1.5rem] text-[#000000] flex items-center gap-[0.5rem]"><img src="/public/icon/badge.png" class="w-[1rem] h-[1rem]" />成就徽章</p>
            <div class="grid grid-cols-4 gap-[1rem]">
                <div v-for="item in data" v-key="item.title" class="flex flex-col items-center gap-[0.5rem]">
                    
                    <div :style="{ background: item.background }" class="w-[3rem] h-[3rem] rounded-[999px] flex items-center justify-center">
                        <img :src="item.image" alt="" class="w-[1rem] h-[1rem] object-scale-down">
                    </div>
                    <p class="text-[0.75rem] font-[Inter] font-normal leading-[1rem] text-[#6B7280]">{{ item.title }}</p>
                    
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    const data = ref([
        {
            image: '/public/icon/pen-white.png',
            background: 'linear-gradient(135deg, #C084FC 0%, #9333EA 100%',
            title: '优质作者',
        },
        {
            image: '/public/icon/star-white.png',
            background: 'linear-gradient(135deg, #60A5FA 0%, #2563EB 100%',
            title: '年度之星',
        },
        {
            image: '/public/icon/love-white.png',
            background: 'linear-gradient(135deg, #4ADE80 0%, #16A34A 100%',
            title: '最受欢迎',
        },
        {
            image: '/public/icon/light-white.png',
            background: 'linear-gradient(135deg, #FACC15 0%, #CA8A04 100%',
            title: '创新先锋',
        },
        {
            image: '/public/icon/light-white.png',
            background: 'linear-gradient(135deg, #FACC15 0%, #CA8A04 100%',
            title: '创新先锋2',
        },
        
    ])
</script>
<style scoped lang="scss">

</style>
